<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<include file="Public/title" />
<style type="text/css">
	input[type='text']{
		width:80px;
		margin-right: 20px;
		margin-left: 5px;
	}

	table th{
		color: red;
	}

	.btn_edit{
		width: 80px;line-height: 26px;border: 3px;
	}

	a{color:#04c; }

</style>
</head>

<body>
<div class="mainWrap">
	
    <!--标题-->
    <div class="mainWrapHeader">
    	<h1 class="mainWrapTit">{$seotitle}</h1>
    </div>
    <!--标题-->
    
    <form method="post" class="dataForm" id="dataForm">
    <div class="mainWrapBd">
    	<div class="tab-con" id="tab-works">
            <table cellpadding="0" border="0" cellspacing="0" class="stdedit" id="table">
				<tr>
                    <th>广告位</th>
                    <td>
                    	名称<input type="text" name="ads_name" id="ads_name" class="sys_text" style="width:200px;"/>				
                        是否高空 <input type="checkbox" name="is_upper_air" id="is_upper_air"/>	<span style="color:red">*不选择为非高空</span>	
    
                    </td>
                </tr>

                <tr>
                    <th>画板大小</th>
                    <td>
                    	尺寸<input type="text" name="W" id="ads_cc" class="sys_text" />						
						<button class="btn btn_edit" id="ju" type="button"><span>添加矩形</span></button>						
						<button class="btn btn_edit" id="yuan" type="button"><span>添加圆形</span></button>
                    </td>
                </tr>

                <!-- <tr>
                    <th>矩形</th>
                    <td>
                    	X 轴<input type="text" name="X" class="sys_text"/>
                						Y 轴<input type="text" name="Y" class="sys_text" />
                						宽度<input type="text" name="W" class="sys_text" />
                						高度<input type="text" name="H" class="sys_text" />
                
                						<a href="javascript:;" class="del">删除当前行</a>
                    </td>
                </tr>
                
                <tr>
                    <th>圆形</th>
                    <td>
                    	X 轴<input type="text" name="X" class="sys_text" />
                						Y 轴<input type="text" name="Y" class="sys_text" />
                						半径<input type="text" name="R" class="sys_text" />
                
                						<a href="javascript:;" class="del">删除当前行</a>
                    </td>
                </tr> -->


                
            </table>

            <table>
            <tr>
                <th></th>
                <td><img src="" id="img"/></td>
            </tr>
            </table>
            
        </div>        
        
        <div class="stdeditSubmit"><input type="button" class="submit" id="sub" value="提 交" /> <input type="button" value="查看预览图" class="reset" id="tu"/></div>
    </div>
    </form>
    
</div>
</body>
</html>

<script type="text/javascript">
		
	
	var ju_str = '<tr class="ju"><th>矩形</th><td>名称<input type="text" name="JU_NAME" class="sys_text"/>X 轴<input type="text" name="X" class="sys_text"/>Y 轴<input type="text" name="Y" class="sys_text" />宽度<input type="text" name="W" class="sys_text" />高度<input type="text" name="H" class="sys_text" /><a href="javascript:;" class="del">删除当前行</a></td></tr>';

	var yuan_str = '<tr class="yuan"><th>圆形</th><td>名称<input type="text" name="YUAN_NAME" class="sys_text"/>X 轴<input type="text" name="X" class="sys_text" />Y 轴<input type="text" name="Y" class="sys_text" />半径<input type="text" name="R" class="sys_text" /><a href="javascript:;" class="del">删除当前行</a></td></tr>'

	//添加矩形
	$("#ju").click(function() {
		$("#table").append(ju_str);  
	});

	//添加圆形
	$("#yuan").click(function() {
		$("#table").append(yuan_str);  
	});

	//删除当前行
	$(".del").live('click', function(event) {
		$(this).parents('tr:first').remove();
	});

	//传参绘图
	$("#tu").click(function(event) {

        var datas = new Array();
        $("#table").find("tr.ju").each(function(){
            datas.push({
                "JU_NAME" : $(this).find("input[name='JU_NAME']").val(),
                "X" : $(this).find("input[name='X']").val(),
                "Y" : $(this).find("input[name='Y']").val(),
                "W" : $(this).find("input[name='W']").val(),
                "H" : $(this).find("input[name='H']").val(),
                "T" : 1
            });
        });

        $("#table").find("tr.yuan").each(function(){
            datas.push({
                "YUAN_NAME" : $(this).find("input[name='YUAN_NAME']").val(),
                "X" : $(this).find("input[name='X']").val(),
                "Y" : $(this).find("input[name='Y']").val(),
                "R" : $(this).find("input[name='R']").val(),
                "T" : 2
            });
        });

        var ads_name = $("#ads_name").val();
        var ads_cc = $("#ads_cc").val();

        $.post("./gd_tu",{'ads_name':ads_name,'ads_cc':ads_cc,'data':JSON.stringify(datas)},function(d){

            alert(d.msg);
            $("#img").attr("src","/"+d.res);
            return false;

        },"json");

	});

    //提交数据
    $("#sub").click(function(event) {

        var datas = new Array();
        $("#table").find("tr.ju").each(function(){
            datas.push({
                "JU_NAME" : $(this).find("input[name='JU_NAME']").val(),
                "X" : $(this).find("input[name='X']").val(),
                "Y" : $(this).find("input[name='Y']").val(),
                "W" : $(this).find("input[name='W']").val(),
                "H" : $(this).find("input[name='H']").val(),
                "T" : 1
            });
        });

        $("#table").find("tr.yuan").each(function(){
            datas.push({
                "YUAN_NAME" : $(this).find("input[name='YUAN_NAME']").val(),
                "X" : $(this).find("input[name='X']").val(),
                "Y" : $(this).find("input[name='Y']").val(),
                "R" : $(this).find("input[name='R']").val(),
                "T" : 2
            });
        });

        var ads_name = $("#ads_name").val();
        var ads_cc = $("#ads_cc").val();
        var is_upper_air = $("#is_upper_air")[0].checked;

        //先生成图，然后入表单
        $.post("./gd_tu",{'ads_name':ads_name,'ads_cc':ads_cc,'data':JSON.stringify(datas)},function(d){

            //提交
            $.post("./do_add",{'ads_name':ads_name,'ads_cc':ads_cc,'is_upper_air':is_upper_air,'filepath':d.res,'data':JSON.stringify(datas)},function(dd){

                alert(dd.msg);
                return false;

            },"json");


        },"json")
        
    });

	
</script>